<template>
  <ul class="recommend-list">
    <li class="recommend-item" v-for="(item, index) in recommends" :key="index">
      <a :href="item.link">
        <img :src="item.image">
        <p>{{item.title}}</p>
      </a>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'Recommend',
  props: {
    recommends: Array,
    default() {
      return []
    }
  }
}
</script>
<style>
  .recommend-list{display: flex;border-bottom: 15px solid #eee;}
  .recommend-item{flex: 1;}
  .recommend-item a{display: flex;flex-direction: column;align-items: center;padding: 10px 0;}
  .recommend-item a img{width: 80%;margin-bottom:5px;}
</style>